/**
 * Created by chesw on 2017/5/15.
 * describe：个人资料设置
 */
var personalInfo = Vue.extend({
    props: [],
    data: function () {
        return {
            UserInfo: { visitId: '', MobileDisplay: '', Mobile: '', Name: '', Gender: 2, picUrl: '', File: '', originalPwd: '', Password: '', confirmPwd: '', CertCode: '', IsDefault: false },
            tabValid: 'sp-valid-tab',
            tabInvalid: 'sp-invalid-tab',
            tab: true, //true：显示第一个tab
            p_obj: { url: 'logo', text: '提示文字' },
            saveDisable: true,
            pwdDisabled: true,
            showCheckBox: true,
            errInfo: {
                type: -1, //-1：默认，1：用户名，2：手机号码，3：验证码，4：证件号码, 5,6,7:密码
                info: ''
            }
        }            
    },
    created: function () {
        var _self = this;
        var pageBox = document.getElementById("clinic-page-box");
        pageBox.style.display = "none";        
        _self.getUserInfo();
    },
    methods: {
        setUserInfoValues: function (res) {
            var _self = this;
            var reg = /^(\d{3})\d{4}(\d{4})$/;
            _self.UserInfo.visitId = res.body.visitId;
            _self.UserInfo.MobileDisplay = res.body.Mobile.replace(reg, "$1****$2");
            _self.UserInfo.Mobile = res.body.Mobile;
            _self.UserInfo.Name = res.body.Name;
            _self.UserInfo.Gender = res.body.Gender;
            _self.UserInfo.CertCode = res.body.CertCode;
            _self.UserInfo.IsDefault = res.body.IsDefault;
            _self.UserInfo.picUrl = res.body.picUrl;

            if (res.body.IsDefault)
                _self.showCheckBox = false;
        },
        clearInfoValues: function () {
            var _self = this;
            _self.UserInfo.visitId = '';
            _self.UserInfo.Mobile = '';
            _self.UserInfo.Name = '';
            _self.UserInfo.Gender = '';
            _self.UserInfo.CertCode = '';
            _self.UserInfo.IsDefault = '';
            _self.UserInfo.picUrl = '';
        },
        getUserInfo: function() {
            var _self = this;
            _self.clearInfoValues();
            _self.$http.post("/PersonalCenter/GetUserInfo").then(function (res) {
                if (res.body.Code === -1) {
                    dialogTip({ url: '/styles/image/icon/no.png', text: res.body.Msg });
                }
                else {                    
                    _self.setUserInfoValues(res);
                }
            });
        },
        personInfoValidate: function () {
            var _self = this;
            _self.saveDisable = true;
            if (isEmpty(_self.UserInfo.Name)) {
                return false;
            }
            else if (isEmpty(_self.UserInfo.CertCode)) {
                return false;
            }
            _self.saveDisable = false;
        },
        save: function () {
            var _self = this;

            if (!isValidOfName(_self.UserInfo.Name, _self.errInfo)) {
                return false;
            }
            else if (!isValidOfCard(_self.UserInfo.CertCode, _self.errInfo)) {
                return false;
            }
            _self.saveDisable = true;
            _self.$http.post("/PersonalCenter/SaveUserInfo", _self.UserInfo).then(function (res) {
                if (res.body.Code === -1) {
                    dialogTip({ url: '/styles/image/icon/no.png', text: res.body.Msg });
                }
                else {
                    dialogTip({ url: '/styles/image/icon/no.png', text: "个人信息更改已保存。" });
                    window.location.href = "/PersonalCenter/index?Tab=3&first=0&second=2";
                    _self.setUserInfoValues(res);
                }
            });         
        },
        passwordValidate: function () {
            var _self = this;
            _self.pwdDisabled = true;

            if (isEmpty(_self.UserInfo.originalPwd)) {
                return false;
            }
            else if (isEmpty(_self.UserInfo.Password)) {
                return false;
            }
            else if (isEmpty(_self.UserInfo.confirmPwd)) {
                return false;
            }
            _self.pwdDisabled = false;
        },
        savePwd: function () {
            var _self = this;

            if (!isValidPassword(_self.UserInfo.originalPwd, _self.errInfo)) {
                _self.errInfo.type = 5;
                return false;
            }
            else if (!isValidPassword(_self.UserInfo.Password, _self.errInfo)) {
                _self.errInfo.type = 6;
                return false;
            }
            else if (!isValidPassword(_self.UserInfo.confirmPwd, _self.errInfo)) {
                _self.errInfo.type = 7;
                return false;
            }
            else if (_self.UserInfo.Password != _self.UserInfo.confirmPwd) {
                _self.errInfo.type = 7;
                _self.errInfo.info = "您两次输入的密码不一致";
                return false;
            }

            _self.$http.post("/PersonalCenter/SaveNewPassword", _self.UserInfo).then(function (res) {
                if (res.body.Code === -1) {
                    originalPwd.style.display = "block";
                    originalPwd.innerText = res.body.Msg;
                }
                else {
                    dialogTip({ url: '/styles/image/icon/ok.png', text: res.body.Msg });
                    window.location.href = "/Home/index";
                }              
                console.log("djakljd");
            });
        },
        cancel: function () {
            this.$emit('showmd', Personal.MYDIAGNOSIS);
        },
        OnChangeImg: function (evt) {
            var _self = this;
            var notice = document.getElementById("notice");
            var headImg = document.getElementById("head-img");
            var uploadImg = document.getElementById("upload-img");
            if (evt != null)
            {
                if (!window.FileReader) return;

                var file = evt.target.files[0];

                var supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
                if (file && supportedTypes.indexOf(file.type) >= 0) {
                    notice.style.display = "none";
                    headImg.src = window.URL.createObjectURL(uploadImg.files[0]);
                    headImg.onload = function (e) {
                        window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL                        
                    }
                    _self.UploadImg(new FormData($("#fileForm")[0]));
                } else {
                    notice.style.display = "block";
                    notice.innerText = '仅支持JPG，GIF，PNG格式图片，且文件小于2M。'
                }   
            }
            else
            {               
                if (uploadImg.value.match(/.jpg|.jpeg|.png/i)){
                    notice.style.display = "none";
                    headImg.src = uploadImg.value;
                    _self.UploadImg(new FormData($("#fileForm")[0]));
                }
                else{
                    notice.style.display = "block";
                    notice.innerText = '仅支持JPG，GIF，PNG格式图片，且文件小于2M。';
                }
            }
                            
        },
        UploadImg: function (data) {
            var _self = this;
            var notice = document.getElementById("notice");
            _self.$http.post("/PersonalCenter/UploadPicture", data).then(function (res) {
                if (res.body.Code === -1) {
                    notice.style.display = "block";
                    notice.innerText = res.body.Msg;             
                } else {
                    //提交成功后
                    //将图片上传到后台，得到后台图片的路径。
                    _self.personInfoValidate();
                    _self.UserInfo.picUrl = res.body;
                }
            });          
        }
    },
    template: 
        '<div class="set-personal-data">' +
        '<div class="set-tab">' +
            '<p :class="[tab ? tabValid : tabInvalid]" @click="tab=true">基本信息设置</p>' +
            '<p :class="[tab ? tabInvalid : tabValid]" @click="tab=false">修改密码</p>' +
        '</div>' +
        '<div class="set-content" v-if="tab">' +
            '<div class="diagnosis-style flex">' +
                '<span class="label-cls">手机号</span>' +
                '<span class="set-pd-phone">{{UserInfo.MobileDisplay}}</span>' +
            '</div>' +
            '<div class="diagnosis-style flex">' +
                '<span class="label-cls">真实姓名</span>' +
                '<span class="input-cls normal-input-cls">' +
                    '<input class="normal-input" type="text" placeholder="名字" v-model="UserInfo.Name" maxlength="15" v-on:input="personInfoValidate()">' +                  
                '</span>' +
                 '<i class="x-icon">*</i>' +
                '<span class="required" id="Name">{{errInfo.type==1? errInfo.info : ""}}</span>' +
            '</div>' +
            //'<div class="diagnosis-style flex">' +
            //    '<span class="label-cls">性别</span>' +
            //    '<div class="set-pd-sex">' +
            //        '<label class="sex"><input type="radio" checked="checked" name="Sex" v-model="UserInfo.Gender" value="0"> 男</label>' +
            //        '<label class="sex"><input type="radio" name="Sex" v-model="UserInfo.Gender" value="1"> 女</label>' +
            //        '<label class="sex"><input type="radio" name="Sex" v-model="UserInfo.Gender" value="2"> 保密</label>' +
            //        '<span class="required"></span>' +
            //    '</div>' +
            //'</div>' +
            '<div class="diagnosis-style flex">' +
                '<span class="label-cls">头像</span>' +
                '<div class="set-pd-head">' +
                    '<form id="fileForm" enctype="multipart/form-data" class="form-horizontal " >' +
                        '<input id="upload-img" type="file" name="file" @change="OnChangeImg" class="up-head-btn" />' +
                    '</form>'+
                    '<span class="up-head-btn">上传图片</span>' +
                    '<span class="notice" id="notice"></span>' +
                '</div>' +              
            '</div>' +
            '<div class="pd-head-img">' +
                '<div class="head-img">' +
                    '<img id="head-img" :src="UserInfo.picUrl" onerror="javascript: this.src = \'/Styles/image/default_head.png\'">' +
                '</div>' +
            '</div>' +
            '<div class="diagnosis-style flex">' +
                '<span class="label-cls">证件号</span>' +
                '<span class="input-cls normal-input-cls">' +
                    '<input class="normal-input" type="text" placeholder="证件号" v-model="UserInfo.CertCode" maxlength="18" v-on:input="personInfoValidate()">' +                 
                '</span>' +
                 '<i class="x-icon">*</i>' +
                '<span class="required" id="CertCode">{{errInfo.type==4? errInfo.info : ""}}</span>' +
            '</div>' +
            '<div class="bottom-btn">' +
                '<span class="checkbox"><input type="checkbox" v-model="UserInfo.IsDefault" v-if="showCheckBox" @click="personInfoValidate()"/><span v-if="showCheckBox">&nbsp;&nbsp;设置默认就诊人</span></span>' +
                '<button class="btn save" @click="save" id="btnSave" :disabled="saveDisable">保存</button>' +
                '<button class="btn cancel" @click="cancel">取消</button>' +
            '</div>' +
        '</div>' +
        '<div class="modify-password" v-else>' +
            '<div class="diagnosis-style flex">' +
                '<span class="label-cls">原密码</span>' +
                '<span class="input-cls normal-input-cls">' +
                    '<input class="normal-input" type="password" placeholder="原密码" v-model="UserInfo.originalPwd" maxlength="20" v-on:input="passwordValidate()">' +
                   
                '</span>' +
                 '<i class="x-icon">*</i>' +
                '<span class="required spd-required" id="originalPwd">{{errInfo.type==5? errInfo.info : ""}}</span>' +
            '</div>' +
            '<div class="diagnosis-style flex">' +
                '<span class="label-cls">新密码</span>' +
                '<span class="input-cls normal-input-cls">' +
                    '<input class="normal-input" type="password" placeholder="新密码" v-model="UserInfo.Password" maxlength="20" v-on:input="passwordValidate()">' +                  
                '</span>' +
                 '<i class="x-icon">*</i>' +
                '<span class="required spd-required" id="Password">{{errInfo.type==6? errInfo.info : ""}}</span>' +
            '</div>' +
            '<div class="diagnosis-style flex">' +
                '<span class="label-cls">确认新密码</span>' +
                '<span class="input-cls normal-input-cls">' +
                    '<input class="normal-input" type="password" placeholder="新密码" v-model="UserInfo.confirmPwd" maxlength="20" v-on:input="passwordValidate()">' +                  
                '</span>' +
                '<i class="x-icon">*</i>' +
                '<span class="required spd-required" id="confirmPwd">{{errInfo.type==7? errInfo.info : ""}}</span>' +
            '</div>' +
            '<div class="set-pd-btn flex">' +
                '<button class="btn save" @click="savePwd" id="saveBtn" :disabled="pwdDisabled">保存</button>' +
                '<button class="btn cancel" @click="cancel">取消</button>' +
            '</div>' +
        '</div>' +
    '</div>'
    
});